layui.use(function () {
  var table = layui.table;
  var form = layui.form;
  var laydate = layui.laydate;

  initTable();

  laydate.render({
    elem: '#search-date',
    range: true, //或 range: '~' 来自定义分割字符
  });

  form.on('submit(search)', function (data) {
    initTable();
    return false;
  });

  form.on('submit(save)', function (data) {
    AjaxRequest(
      '/alarm/deal/save',
      callBack,
      {
        id: data.field.id,
        dealPerson: data.field.dealPerson,
        dealContent: data.field.dealContent,
      },
      'post'
    );

    function callBack(result) {
      if (result.status == 200) {
        initTable();
        layer.closeAll();
        layer.msg('保存成功！');
      }
    }
    return false;
  });

  function initTable() {
    var height = $('.contain').innerHeight() - 36 - 98 - 26;

    //第一个实例
    table.render({
      title: '',
      height: height,
      text: {
        none: '暂无数据',
      },
      elem: '#table',
      skin: 'nob',
      headers: {
        SessionId: JSON.parse(localStorage.getItem('userInfo')).sessionId,
      },
      url: ajaxPrefix() + '/alarm/list',
      where: {
        name: $('#search-name').val(),
        code: $('#search-code').val(),
        type: $('#search-type').val(),
        beginDate: $('#search-date').val().substring(0, 10),
        endDate: $('#search-date').val().substring(13, 24),
        dealStatus: $('.tab-item.active')[0].dataset.type,
      },
      parseData: function (res) {
        //res 即为原始返回的数据
        return {
          code: res.status == 200 ? 0 : 1, //解析接口状态
          msg: res.message, //解析提示文本
          count: res.result?res.result.total:0, //解析数据长度
          data: res.result?res.result.data:[], //解析数据列表
        };
      },
      request: {
        pageName: 'pageNum', //页码的参数名称，默认：page
        limitName: 'pageSize', //每页数据量的参数名，默认：limit
      },
      page: {
        //开启分页
        limit: 10,
      },
      cols: [
        [
          //表头
          {
            field: '',
            title: '告警图片',
            align: 'center',
            templet: function (d) {
              let res = JSON.stringify(d);
              return `<div class="table-tool">
                        <div onclick="showPhotoWindow('${d.alarmTime}','${d.alarmImage}')">
                          <img style="width: .3rem;height: .3rem;" src="/images/${d.alarmImage}">
                        </div>
                      </div>`;
            },
          },
          {
            field: 'deviceName',
            title: '设备名称',
            align: 'center',
          },
          {
            field: 'deviceCode',
            title: '设备号',
            align: 'center',
          },
          {
            field: 'deviceTypeDesc',
            title: '设备类型',
            align: 'center',
          },
          {
            field: 'eventTypeDesc',
            title: '告警类型',
            align: 'center',
          },
          {
            field: 'alarmDesc',
            title: '告警描述',
            align: 'center',
          },
          {
            field: 'alarmTime',
            title: '告警时间',
            align: 'center',
          },
          {
            field: 'dealPerson',
            title: '处理人',
            align: 'center',
          },
          {
            field: 'dealContent',
            title: '处理描述',
            align: 'center',
          },
          {
            field: 'dealTime',
            title: '处理时间',
            align: 'center',
          },
          {
            field: '',
            title: '操作',
            align: 'center',
            width: 150,
            templet: '#operate',
            hide: $('.tab-item.active')[0].dataset.type == '2',
          },
        ],
      ],
    });

    table.on('tool(filter)', function (obj) {
      //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data, //获得当前行数据
        layEvent = obj.event; //获得 lay-event 对应的值
      if (layEvent === 'deal') {
        layer.open({
          type: 1,
          title: '处理',
          skin: 'default-class',
          area: ['4.5', 'auto'],
          // shade: false,
          move: false,
          closeBtn: 2,
          id: 1, //设置该值后，不管是什么类型的层，都只允许同时弹出一个。
          content: `<form class="layui-form" lay-filter="saveForm" style="margin: .3rem;height:calc(100% - .6rem)">
                      <div class="layui-form-item">
                        <label class="layui-form-label">处理人</label>
                        <div class="layui-input-block">
                          <input type="text" name="dealPerson" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                      </div>
                      <input type="hidden" name="id" autocomplete="off" class="layui-input">
                      <div class="layui-form-item">
                        <label class="layui-form-label">处理描述</label>
                        <div class="layui-input-block">
                          <textarea name="dealContent" autocomplete="off" class="layui-textarea" lay-verify="required">
                          </textarea>
                        </div>
                      </div>
                      <div class="layui-form-item form-btn" style="text-align:center">
                        <div class="layui-input-block" style="margin-left: 0;">
                          <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                        </div>
                      </div>
                    </form>`, //这里content是一个普通的String
          success: function (layero, index) {
            form.val('saveForm', {
              id: data.id,
            });
          },
        });
      }
    });
  }

  $('.tab-item').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');
    initTable();
  });
});
